import React, { Component } from 'react';
import {Container} from './style'

import 'antd/dist/antd.css'
import { Table, Form,Space ,DatePicker, Popconfirm,} from 'antd';

import locale from "antd/es/date-picker/locale/zh_CN";
const EditableContext = React.createContext();

const { RangePicker } = DatePicker;
const EditableRow = ({ index, ...props }) => {
  const [form] = Form.useForm();
  return (
    <Form form={form} component={false}>
      <EditableContext.Provider value={form}>
        <tr {...props} />
      </EditableContext.Provider>
    </Form>
  );
};

const EditableCell = ({
  title,
  editable,
  children,
  dataIndex,
  record,
  ...restProps
}) => {
  let childNode = children;

  return <td {...restProps}>{childNode}</td>;
};

// import connect from './connect'
// @connect
class index extends Component {
  componentDidMount(){
    // 在这里发送每个页面获取数据的请求
    // this.props.setSwiperData()
  }

  constructor(props) {
    super(props);
    this.columns = [
      {
        title: "序号", //表头标题
        dataIndex: "key", //数据源
        editable: true,
      },
      {
        title: "单据类型",
        dataIndex: "string",
        editable: true,
        render(de) {
          let config = {
            1: "出库单",
            2: "入库单",
            3: "损耗单",
          };
          return config[de];
        },
      },
      {
        title: "单号",
        dataIndex: "number",
        editable: true,
        
      },
      {
        title: "操作人",
        dataIndex: "people",
        editable: true,
      },
      {
        title: "操作日期",
        dataIndex: "data",
        editable: true,
      },
      {
        title: "原因",
        dataIndex: "reason",
        editable: true,
        render(de) {
          let config = {
            1: "长的太好看",
            2: "出库物品被退回",
            3: "长的帅",
            4: "测试调拨功能",
            5: "啥也不是",
            6: "干嘛呀",
          };
          return config[de];
        },
      },
      {
        title: '操作',
        dataIndex: 'operation',
        render: (text, record) =>
        this.state.dataSource.length >= 1 ? (
          <Popconfirm title="确认恢复?" onConfirm={() => this.handleDelete(record.key)}>
            <a>恢复</a>
          </Popconfirm>
          
        ) : null,
      },
    ];
    this.state = {
      dataSource: [ 
        {
          key: "1",
          string: 2,
          de:1,
          number: "RK20190523001",
          people: "陈岐",
          data: "2020-12-24",
          reason: 1,
        },
        {
          key: "2",
          string: 1,
          de:1,
          number: "RK20201225",
          people: "秀奇",
          data: "2020-12-24",
          reason: 4,
        },
        {
          key: "3",
          string: 3,
          de:1,
          number: "RK20201224",
          people: "张俊",
          data: "2020-12-24",
          reason: 3,
        },
        {
          key: "4",
          string: 2,
          de:1,
          number: "RK20201227",
          people: "梦月",
          data: "2020-12-27",
          reason: 6,
        },
        {
          key: "5",
          string: 1,
          de:1,
          number: "RK20201128",
          people: "张婷",
          data: "2020-11-28",
          reason: 5,
        },
        {
          key: "6",
          string: 3,
          de:1,
          number: "RK20201221",
          people: "皇者",
          data: "2020-12-21",
          reason: 4,
        },
        {
          key: "7",
          string: 3,
          de:1,
          number: "RK20201220",
          people: "史迪仔",
          data: "2020-12-20",
          reason: 3,
        },
        {
          key: "8",
          string: 1,
          de:1,
          number: "RK20201126",
          people: "路飞",
          data: "2020-11-26",
          reason: 6,
        },
        {
          key: "9",
          string: 3,
          de:1,
          number: "RK20201203",
          people: "索隆",
          data: "2020-12-03",
          reason: 1,
        },
        {
          key: "10",
          string: 1,
          de:1,
          number: "RK20201214",
          people: "娜美",
          data: "2020-12-14",
          reason: 2,
        },
        {
          key: "11",
          string: 3,
          de:1,
          number: "RK20201216",
          people: "草帽小子",
          data: "2020-12-16",
          reason: 2,
        },
        
      ],
      count: 12,
    };
  }

  handleDelete=(key)=>{
    const dataSource= [...this.state.dataSource];
    this.setState({
      dataSource: dataSource.filter((item) => item.key !== key),
    });

  }
  render() {
    const { dataSource } = this.state;
    const components = {
      body: {
        row: EditableRow,
        cell: EditableCell,
      },
    };
    const columns = this.columns.map((col) => {
      if (!col.editable) {
        return col;
      } return {
        ...col,
        onCell: (record) => ({
          record,
          editable: col.editable,
          dataIndex: col.dataIndex,
          title: col.title, 
          handleSave: this.handleSave,
        }),
      };
    });
    return (
      <Container>
         <div>
           {/* 导航 */}
           <div className="container">
             {/* 导航 */}
              {/* 日历 */}
              <div className="end">
              <div className="day">
              <Space direction="vertical" size={12}>
                <RangePicker locale={locale}/>
              </Space>
             </div>
              {/* 下拉菜单 */}
              <div className="menu">
                <select onChange={this.handleChange}>
                  <option value="全部数据类型">全部数据类型</option>
                  <option value="入库单">入库单</option>
                  <option value="出库单">出库单</option>
                  <option value="调拨单">调拨单</option>
                  <option value="损耗单">损耗单</option>
                </select>
              </div>
              {/* 单号 */}
              <div className="odd">
                <input type="text" placeholder="单号"/>
                <button className="btn">查询</button>
              </div>
              {/* 查询 */}
              </div>
            </div> 

         </div>

         <Table
          components={components}
          rowClassName={() => 'editable-row'}
          bordered
          dataSource={dataSource}
          columns={columns}
        />

        
      </Container>
    );
  }
}

export default index;

